@import "../../css/_variables";

.v[data-class=v] {
  .vpanel {
    border: 1px solid black;
    background: $global-background-color;
    [theme=dark] & {
      border: 1px solid white;
      background: $global-background-color-dark;
    }
    [theme=black] & {
      border: 1px solid white;
      background: $global-background-color-black;
    }
  }
  p {
    color: $global-font-color;
    [theme=dark] & {
      color: $global-font-color-dark;
    }
    [theme=black] & {
      color: $global-font-color-black;
    }
  }
  .vcard {
    border: none;
    .vhead span.vnick {
      color: $global-font-color;
      [theme=dark] & {
        color: $global-font-color-dark;
      }
      [theme=black] & {
        color: $global-font-color-black;
      }
    }
    .vquote {
      border: none;
    }
    .vhead .vtime {
      color: $global-font-color;
      [theme=dark] & {
        color: $global-font-color-dark;
      }
      [theme=black] & {
        color: $global-font-color-black;
      }
    }
    .vhead .vreply svg {
      fill: $global-font-color;
      [theme=dark] & {
        fill: $global-font-color-dark;
      }
      [theme=black] & {
        fill: $global-font-color-black;
      }
    }
  }
  .vlogin-btn {
    border: 1px solid black;
    background: $global-background-color;
    color: $global-font-color;
    [theme=dark] & {
      border: 1px solid white;
      background: $global-background-color-dark;
      color: $global-font-color-dark;
    }
    [theme=black] & {
      border: 1px solid white;
      background: $global-background-color-black;
      color: $global-font-color-black;
    }
  }
  .vicon {
    fill: $global-font-color;
    [theme=dark] & {
      fill: $global-font-color-dark;
    }
    [theme=black] & {
      fill: $global-font-color-black;
    }
  }
  .vinfo .vtext-number {
    color: $global-font-color;
    [theme=dark] & {
      color: $global-font-color-dark;
    }
    [theme=black] & {
      color: $global-font-color-black;
    }
  }
  .vbtn {
    color: $global-font-color;
    [theme=dark] & {
      color: $global-font-color-dark;
    }
    [theme=black] & {
      color: $global-font-color-black;
    }
  }
  .veditor {
    background: $global-background-color;
    color: $global-font-color;
    [theme=dark] & {
      background: $global-background-color-dark;
      color: $global-font-color-dark;
    }
    [theme=black] & {
      background: $global-background-color-black;
      color: $global-font-color-black;
    }
  }
  .vheader {
    border-bottom: 1px solid black;
    [theme=dark] & {
      border-bottom: 1px solid white;
    }
    [theme=black] & {
      border-bottom: 1px solid white;
    }
    input {
      background: $global-background-color;
      [theme=dark] & {
        background: $global-background-color-dark;
      }
      [theme=black] & {
        background: $global-background-color-black;
      }
    }
    label {
      color: $global-font-color;
      [theme=dark] & {
        color: $global-font-color-dark;
      }
      [theme=black] & {
        color: $global-font-color-black;
      }
    }
  }
  .vinput {
    color: $global-font-color;
    [theme=dark] & {
      color: $global-font-color-dark;
    }
    [theme=black] & {
      color: $global-font-color-black;
    }
  }
  code, pre {
    color: $code-info-color;
    background: $code-background-color;
    [theme=dark] & {
      color: $code-info-color-dark;
      background: $code-background-color-dark;
    }
    [theme=black] & {
      color: $code-info-color-black;
      background: $code-background-color-black;
    }
  }
}
